<template>
	<view>
		<view class="u-m-t-20 cbg-white">
			<view class="cflex-c u-p-25">
				<view class="cflex-r u-m-b-25" style="justify-content: space-between;align-items: center;"
					@tap="changeHead()">
					<view style="font-weight: bold;">
						<text>本人照片</text>
					</view>
					<view class="u-m-r-10 cflex-r" style="align-items: center;">
						<image v-if="jishiInfo.avatar!==''" :src="jishiInfo.avatar" mode="aspectFill"
							style="width:50rpx;height:50rpx;border-radius: 50%;"></image>
						<!-- <text v-else>未上传</text> -->
						<image style="width: 14rpx;height: 24rpx; padding-left: 20rpx;"
							src="../../static/qieTu/arrow-right.png"></image>
					</view>
				</view>
			</view>
		</view>

		<view>
			<view class="u-m-t-20 cbg-white">
				<view class="cflex-c u-p-25">
					<view class="cflex-r u-m-b-25" style="justify-content: space-between;align-items: center;"
						@tap="showName()">
						<view style="font-weight: bold;">
							<text>昵称</text>
						</view>
						<view class="u-m-r-10">
							<view style="font-weight: bold;">
								<text style="max-width:540rpx;display: inline-block;word-break: break-word;"
									class="u-line-1">{{jishiInfo.name}}</text>
								<image style="width: 14rpx;height: 24rpx; padding-left: 20rpx;"
									src="../../static/qieTu/arrow-right.png"></image>
							</view>
						</view>
					</view>
					<!-- 修改昵称弹出来的修改框 -->
					<u-popup v-model="popup.showName" mode="bottom" length="30%" :closeable="popup.closeAble"
						close-icon-size="32" @close="changeName()">
						<view class="cflex-c" style="justify-content: space-around;padding:100rpx 50rpx;
						width:100%;">
							<u-input v-model="jishiInfo.name" type="text" placeholder="请输入姓名"
								:clearable="uInput.clearable"
								style="width:600rpx;border:1px solid #ccc;padding-left:10rpx;border-radius: 10rpx;" />

							<view style="width: 600rpx;display: flex;justify-content: center;">
								<view class="bottom_box" @click="changeName()">
									保存
								</view>
							</view>

						</view>
					</u-popup>
					<view class="u-m-b-25" style="width: 100%;">
						<u-divider :use-slot="false" half-width="350"></u-divider>
					</view>

					<view class="cflex-r u-m-b-25" style="justify-content: space-between;align-items: center;">
						<view style="font-weight: bold;">
							<text>身份认证</text>
						</view>
						<view class="u-m-r-10 cflex-r" @tap="shengfen()">
							<view class="u-p-r-20" style="color: #aaaaaa;">
								<view>
									<text>{{jishiInfo.codeAuth===1?"已认证":"未认证"}}</text>
								</view>
							</view>
							<view>
								<image style="width: 14rpx;height: 24rpx;" src="../../static/qieTu/arrow-right.png">
								</image>
							</view>
						</view>
					</view>
					<view class="u-m-b-25" style="width: 100%;">
						<u-divider :use-slot="false" half-width="350"></u-divider>
					</view>

					<view class="cflex-r u-m-b-25" style="justify-content: space-between;align-items: center;"
						@tap="showAddZiZhi()">
						<view style="font-weight: bold;width:400rpx;">
							<text>资质证件</text>
						</view>
						<view class="u-m-r-10 cflex-r-c">
							<view class="u-p-r-20 cflex-r-c" style="color: #aaaaaa;">
								<view v-for="(item,index) in jishiInfo.params.ziZhiUrl">
									<image :src="item" mode="aspectFill" v-if="jishiInfo.params.ziZhiUrl!==''"
										style="width:50rpx;height:50rpx;border-radius: 5rpx;padding-right:10rpx;"
										@tap.stop="previewImg(index)">
									</image>
								</view>
								<text>请上传健康证等</text>
							</view>
							<view>
								<image style="width: 14rpx;height: 24rpx;" src="../../static/qieTu/arrow-right.png">
								</image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-m-t-20 cbg-white">
			<view class="cflex-c u-p-25">
				<view class="cflex-r u-m-b-25" style="justify-content: space-between;align-items: center;">
					<view style="font-weight: bold;">
						<text>手机号</text>
					</view>
					<view class="u-m-r-10">
						<view>
							<text>{{jishiInfo.phone}}</text>
							<image style="width: 14rpx;height: 24rpx; padding-left: 20rpx;"
								src="../../static/qieTu/arrow-right.png"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-m-t-20 cbg-white">
			<view class="cflex-c" style="padding: 20rpx 20rpx 60rpx 20rpx;">
				<view class="cflex-r u-m-b-25" style="justify-content: space-between;align-items:flex-start;"
					@tap="showDes()">
					<view style="font-weight: bold;">
						<text>个人简介</text>
					</view>
					<view class="u-m-r-10 cflex-r" style="">
						<text style="max-width:550rpx;text-align: left;
						" v-if="jishiInfo.des!==''">{{jishiInfo.des}}</text>
						<text v-else style="color:#ccc;">未填写</text>
						<!-- <image style="width: 14rpx;height: 24rpx; padding-left: 20rpx;"
							src="../../static/qieTu/arrow-right.png"></image> -->
					</view>
				</view>
				<u-popup v-model="popup.showDes" mode="center" width="700" :height="device==='APP'?600:1000"
					:closeable="popup.closeAble" close-icon-size="32" :border-radius="popup.borderRadius"
					@touchmove.stop="">
					<view class="cflex-c" style="justify-content: flex-end;
					align-items: center;" @touchmove.stop="">
						<view class="cflex-r u-p-l-20" style="width:700rpx;height:100rpx;background-color: rgb(248,248,248);
						border-bottom: 1px solid #ddd;align-items: center;font-weight: bold;font-size: 36rpx;" @touchmove.stop="">
							我的简介
						</view>
						<view style='padding:50rpx 50rpx 20rpx 50rpx;display: flex;justify-content: flex-end;
						flex-wrap: wrap;overflow: hidden;width:700rpx;' :style="{'height':device==='APP'?'320rpx':'750rpx'}"
							@touchmove.stop="">
							<textarea v-model="jishiInfo.tempdes" @touchmove.stop="" @fucos.stop=""
								placeholder="请输入简介..." :style="{'height':device==='APP'?'240rpx':'650rpx'}" style="width:600rpx;font-size:32rpx;
							border:1rpx solid #ccc;padding:10rpx;border-radius: 5rpx;line-height:40rpx;" />
						</view>
						<view style="width:700rpx;display: flex;justify-content:flex-end;padding: 0 50rpx;">
							<view class="cflex-r-c" style="width:150rpx;background-color:rgb(255,190,11);
							border-radius: 10rpx;height:60rpx;margin-top:30rpx;font-weight: bold;" @tap="changeDes()">完成</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<view v-if="maskShow"><!--选择照片-->
			<u-mask :show="mask"></u-mask>
			<view class="cflex-c-c"
				style="position: fixed;bottom:0rpx;right:0;left:0;height:240rpx;letter-spacing:5rpx;z-index:10071;">
				<view class='cflex-r-c'
					style="padding:30rpx 0rpx;background-color:white;width:730rpx;border:1px solid #eee;border-radius:10rpx;font-weight: bold;"
					@tap="addZiZhi()">继续添加资质照片</view>
				<view class='cflex-r-c u-m-t-20'
					style="padding:25rpx 0rpx;background-color:white;width:730rpx;border:1px solid #eee;border-radius:10rpx;"
					@tap="backEvent()">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jishiInfo: {
					params: {
						ziZhiUrl: []
					}
				},
				popup: {
					showName: false,
					showDes: false,
					borderRadius: 10,
					closeAble: true
				},
				uInput: {
					border: true,
					clearable: false,
					width: 600,
					height: 240,
					custom: {
						width: '600rpx',
						height: '240rpx',
						fontSize: '32rpx',
						border: "1px solid #ccc",
						borderRadius: "5rpx",
						padding: "10rpx",
						'line-height': "40rpx",
						overflowY: 'scroll'
					}
				},
				maskShow: false,
				mask: true,
				device: "APP", //运行平台
			}
		},
		onLoad() {
			this.httpRequest();
			//#ifdef MP-WEIXIN
			this.device = "WX"
			//#endif
		},
		methods: {
			httpRequest() { //获取数据
				this.$request("worker/other/selectWorker").then(res => {
					console.log(res)
					this.jishiInfo = res.data;
					this.jishiInfo.params.ziZhiUrl = this.jishiInfo.params.ziZhiUrl.split(",")
					console.log('zizhi', this.jishiInfo.params.ziZhiUrl);
					this.jishiInfo.tempdes = ""; //tempdes表示临时的简介
				});
			},
			showName() { //显示修改昵称框
				this.popup.showName = !this.popup.showName
			},
			showDes() {
				this.jishiInfo.tempdes = this.jishiInfo.des
				this.popup.showDes = !this.popup.showDes;
			},
			shengfen() { //身份认证
				uni.navigateTo({
					url: "./shenFenRenZheng"
				})
			},
			showAddZiZhi() { //显示添加资质按钮
				this.maskShow = true;
			},
			async addZiZhi() { //添加资质
				let res = await this.myChooseImg(2);
				let upRes = await this.myUpImg(res);
				upRes = JSON.parse(upRes.data);
				// this.jishiInfo.avatar=upRes.msg;
				let obj = {
					urls: upRes.url
				}
				this.$request("worker/zizhi/addZiZhi", obj).then(res => {
					if (this.jishiInfo.params.ziZhiUrl.length === 3) {
						this.jishiInfo.params.ziZhiUrl.shift()
					}
					this.jishiInfo.params.ziZhiUrl.push(upRes.url)
					this.$forceUpdate()
				});

			},
			deleteZiZhi(index, url) {
				this.$request("worker/zizhi/delZiZhi", obj).then(res => {
					console.log("update", res)
				});
			},
			previewImg(index) { //资质预览
				let that = this;
				uni.previewImage({
					current: index,
					urls: this.jishiInfo.params.ziZhiUrl,
					success() {},
					// longPressActions: {
					// 	itemList: ['删除', '保存图片'],
					// 	async success(data) {
					// 		let url=that.jishiInfo.params.ziZhiUrl[data.index]
					// 		if(data.tapIndex===0){
					// 			console.log("删除",url)
					// 			that.deleteZiZhi(data.tapIndex,url)
					// 		}else{
					// 			console.log("保存",url);
					// 		}
					// 		// //console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					// 	},
					// 	fail(err) {
					// 		console.log(err.errMsg);
					// 	}
					// }
				})
			},
			maskEvent() { //切换遮罩层显示或隐藏
				this.maskShow = false;
			},
			backEvent() { //添加资质点了取消
				this.maskShow = false;
			},
			myUpImg(res) { //上传文件
				let that = this;
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: that.$store.state.baseUrl + "common/up/single",
						filePath: res.tempFilePaths[0],
						name: 'file',
						formData: {
							imgPath: res.tempFilePaths[0],
						},
						success(res1) {
							resolve(res1)
						},
						fail(err) {
							reject(err)
						}
					})
				})
			},
			myChooseImg(flag) { //选择图片
				this.maskEvent()
				let mySourceType = ['album'];
				return new Promise((reslove, rejuct) => {
					if (flag === 1) {
						mySourceType = ['album', 'camera'];
					}
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: mySourceType, //从相册选择
						success(res) {
							reslove(res)
						},
						fail(err) {
							rejuct(err)
						}
					})
				})
			},
			async changeHead() { //修改头像
				let imgRes = await this.myChooseImg(1);
				let upRes = await this.myUpImg(imgRes);
				upRes = JSON.parse(upRes.data);
				this.jishiInfo.avatar = upRes.url;
				let obj = {
					avatar: upRes.url
				}
				this.$request("worker/other/updateWorker", obj).then(res => {
					console.log("update", res)
				});
				this.$forceUpdate()
			},
			changeName() {
				let obj = {
					name: this.jishiInfo.name
				};
				this.$request("worker/other/updateWorker", obj).then(res => {
					console.log("update", res)
				});
				this.popup.showName = false
			},
			changeDes() {
				if (this.jishiInfo.tempdes) {
					let obj = {
						des: this.jishiInfo.tempdes
					};
					this.popup.showDes = false;
					this.jishiInfo.des = this.jishiInfo.tempdes;
					this.$request("worker/other/updateWorker", obj).then(res => {
						console.log("update", res)
					});
				} else {
					uni.showToast({
						title: "简介内容不能为空",
						icon: "none"
					})
					this.popup.showDes = true;
				}
			}

		}
	}
</script>

<style>
	.bottom_box {
		width: 500rpx;
		background-color: #2869FE;
		border-radius: 10rpx;
		height: 60rpx;
		margin-top: 30rpx;
		color: #fff;
		font-weight: bold;
		text-align: center;
		line-height: 60rpx;
		margin-top: 100rpx;
	}
</style>